<template>
    <div class="shopList page">
        <div class="head">
            <div class="title">
                <i class="cubeic-back" @click="back"></i>
<!--                <i class="iconfont icondingwei1x"></i>-->
<!--                长沙市-->
                智慧门店
            </div>
            <div class="search">
                <input class="input" v-model="shopName" placeholder="输入商家、商品名称" @input="search()"/>
            </div>
        </div>
        <div class="con">
            <cube-scroll
                    ref="scroll"
                    :data="shopList"
                    :options="options"
                    @pulling-up="getShopList(page,shopName)"
            >
                <div class="item" v-for="item in shopList" :key="item.id" @click="turn(item.userId)">
                    <div class="shopImg"><img :src="imgH+item.avatar"></div>
                    <div class="shopInfo">
                        <div class="infoLeft">
                            <div class="name">{{item.name}}</div>
                            <div class="other num">
                                <i class="iconfont iconxingxing1x"></i>5.0
                            </div>
                            <div class="other">
                                <i class="iconfont iconshijian1x"></i>{{item.businessHours||'无'}}
                            </div>
                            <div class="other">
                                <i class="iconfont icondingwei1x"></i>{{item.province+item.city+item.area+item.shopAddress}}
                            </div>
                        </div>
                        <div class="infoRight">
                            {{item.grp||'0'}}km
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import {getShopList,getDistance} from '@/api/home'
    import wx from '@/wx'
    export default {
        name: "index",
        data(){
            return{
                shopName:null,
                page:1,
                shopList:[],
                imgH:process.env.VUE_APP_IMG_DOMAIN,
                la:null,
                lg:null,
                options:{
                    pullUpLoad: true
                }
            }
        },
        methods:{
            getShopList(page,shopName){
                getShopList(page,shopName).then(res=>{
                    if (this.page==1){
                        this.shopList =res.extra.shop
                    }else {
                        this.shopList = this.shopList.concat(res.extra.shop)
                    }
                    this.getLong()
                    this.page++
                })
            },
            getLong(){
                if (!this.la&&!this.lg){return}
                this.shopList.forEach(item=>{
                    let grp = (getDistance(this.la,this.lg,item.lat,item.lng)/1000).toFixed(2)
                    this.$set(item,'grp',grp)
                })
                this.shopList.sort(function (a,b) {
                    return a.grp-b.grp
                })
            },
            search(){
                console.log(this.shopName);
                this.page=1
                this.getShopList(this.page,this.shopName)
            },
            turn(id){
                this.$router.push({
                    path:`/shop/list?uid=${id}`
                })
            },
            back(){
                this.$router.go(-1)
            }
        },
        activated() {
            wx.config().then(()=>{
                wx.getPlace().then(res=>{
                    console.log(res.la)
                    console.log(res.lg)
                    this.la = res.la
                    this.lg = res.lg
                    this.getLong()
                })
            })
            this.getShopList(this.page,this.shopName)
        }
    }
</script>

<style scoped lang="stylus">
.shopList
    height 100%
    background-color: #f5f5f5
    .head
        padding 12px
        font-size 19px
        background-color: #00C3BD
        color #F7FFFF
        .search
            margin-top 22px
            width 345px
            background-color #F7FFFF
            border-radius 16px
            height 32px
            line-height 32px
            .input
                border-radius 16px
                text-align center
                width 100%
                height 100%
                outline none
                font-size 12px
    .con
        background-color: #fff
        height 80%
        margin-top 10px

        .item
            padding 10px 15px 15px 15px
            height 75px
            display flex
            .shopImg
                width: 80px
                height: 80px
                img
                    width: 80px
                    height: 80px
            .shopInfo
                display flex
                justify-content space-between
                margin-left 10px
                color #909999
                font-size 12px
                width 255px
                .infoLeft
                    width 210px
                    .name
                        font-size 18px
                        color #303333
                        line-height 25px
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                    .num
                        color #FBA51A
                    .other
                        height 17px
                        display flex
                        align-items center
                    i
                        margin-right 5px
                .infoRight
                    display flex
                    align-items center

</style>